<template>
  <div>
    <div v-if="tabs && tabs.items" class="page-menu-tabs" :class="tabStatus">
      <a-tabs :tabBarStyle="{ margin: 0 }" @change="tabs.callback" :activeKey="tabs.active()">
        <a-tab-pane v-for="item in tabs.items" :tab="item.title" :key="item.key"> </a-tab-pane>
      </a-tabs>
    </div>
    <div class="page-content">
      <router-view />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Portrait',
  data() {
    return {
      tabs: {
        items: [
          {
            key: '1',
            title: '告警区域'
          },
          {
            key: '2',
            title: '重点监控区域'
          }
        ],
        active: () => {
          switch (this.$route.path) {
            case '/areaManage/aramList':
              return '1'
            case '/areaManage/monitorList':
              return '2'
          }
        },
        callback: key => {
          switch (key) {
            case '1':
              this.$router.push('/areaManage/aramList')
              break
            case '2':
              this.$router.push('/areaManage/monitorList')
          }
        }
      },
      search: true,
      tabStatus: 'addTab'
    }
  },
  watch: {
    $route(val) {
      // console.log("1111111111111");
      // console.log(val.name);
      // if (val.name == 'earlyWarning-portrait-detail') {
      //   this.tabStatus = 'hideTab'
      // } else {
      //   this.tabStatus = 'addTab'
      // }
      // console.log(this.tabStatus)
    }
  }
}
</script>

<style lang="less" scoped>
.page-menu-tabs {
  background-color: #fff;
  padding: 0 24px;
}
.search-content {
  margin-top: 0;
}
.page-content {
  padding-bottom: 14px;
}
</style>
<style>
.addTab {
  display: block;
}
.hideTab {
  display: none;
}
</style>
